<template>
  <div class="inner main-content" v-if="sortationOrderData">
    <PageTitle title="分拣详单" />
    <div class="ibody">
      <div class="ib-inner">
        <div class="scan">
          <div
            :class="['tip', sortationCompleted ? 'green' : '']"
            v-if="!scanResult.commonName"
          >
            {{
              sortationCompleted
                ? "本单已分拣完成"
                : "扫描药品外包装69码 开始分拣"
            }}
          </div>
          <div class="tip green" v-if="scanResult.commonName">
            {{
              sortationCompleted
                ? "本单分拣已完成"
                : whetherComplete
                ? `共 ${scanDrugNeedNum} 盒（本单结束）`
                : `共 ${scanDrugNeedNum} 盒`
            }}
          </div>
          <div class="logo" v-if="!scanResult.commonName">
            <el-image
              :src="sortationCompleted ? finishedPng : fjScanPng"
              model="contain"
            />
            <div v-if="!sortationCompleted" class="scan-line updownAnmi" />
          </div>
          <div class="logo" v-if="scanResult.commonName">
            <el-image :src="scanResult.outerPackagePicUrl" model="contain" />
          </div>
          <div class="info">
            <el-row>
              <el-col :span="6">
                <span class="i-label">名称</span>
              </el-col>
              <el-col :span="18">
                <span class="i-value">
                  <span>{{ scanResult.commonName || "--" }}</span>
                  <span>{{
                    scanResult.productName
                      ? "（" + scanResult.productName + "）"
                      : ""
                  }}</span>
                </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="i-label">规格</span>
              </el-col>
              <el-col :span="18">
                <span class="i-value">{{ scanResult.standard || "--" }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="i-label">厂家</span>
              </el-col>
              <el-col :span="18">
                <span class="i-value">
                  {{ scanResult.producerName || "--" }}
                </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <span class="i-label">商品码</span>
              </el-col>
              <el-col :span="18">
                <span class="i-value">
                  {{ durg69No || "--" }}
                </span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="package">
          <el-row :gutter="20">
            <el-col
              :xs="12"
              :sm="12"
              :md="12"
              :lg="8"
              :xl="6"
              v-for="(item, index) in sortationOrderData.orderfills"
              :key="index"
              @click="showPackageDetail(item)"
            >
              <div class="p-card">
                <el-card
                  :class="[
                    'box-card',
                    disabledBaoGuoIndex.includes(index) ? 'inActive' : '',
                    hightBaoGuoIndex.includes(index) ? 'active' : ''
                  ]"
                >
                  <div class="orderNo">{{ item.orderfillNo }}</div>
                  <div class="num" v-if="hightBaoGuoIndex.includes(index)">
                    {{ getAmount(item) + "盒" }}
                  </div>
                  <div class="num2">共{{ getTotalDrugsAmount(item) }}盒</div>
                  <div
                    class="complete"
                    v-if="
                      !hightBaoGuoIndex.includes(index) &&
                      hasBeginScan &&
                      (item.hasScanDrugCategoryNum === item.drugs.length ||
                        sortationCompleted)
                    "
                  >
                    <el-image :src="completePng" />
                  </div>

                  <div class="index">{{ numToTxt[index + 1] + "号" }}</div>
                </el-card>
              </div>
            </el-col>
          </el-row>
          <div class="detail">
            <el-row>
              <el-col :span="12">
                <span class="t-label">单号</span>
                <span class="t-value">{{
                  sortationOrderData.orderfillSortingNo
                }}</span>
              </el-col>
              <el-col :span="12">
                <span class="t-label">创建时间</span>
                <span class="t-value">{{ sortationOrderData.createTime }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="t-label">分拣员</span>
                <span class="t-value">{{
                  sortationOrderData.sorter || "--"
                }}</span>
              </el-col>
              <el-col :span="12">
                <span class="t-label">分拣时间</span>
                <span class="t-value">{{
                  sortationOrderData.completionTime || "--"
                }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="t-label">种类</span>
                <span class="t-value">{{ sortationOrderData.category }}</span>
              </el-col>
              <el-col :span="12">
                <span class="t-label">药品盒数</span>
                <span class="t-value">{{ sortationOrderData.qantity }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span class="t-label">配送点</span>
                <span class="t-value">{{
                  sortationOrderData.shippingAddress
                }}</span>
              </el-col>
              <el-col :span="12">
                <span class="t-label">分拣状态</span>
                <span class="t-value">{{ sortationOrderData.status }}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="btn-group">
        <div v-if="whetherComplete" @click="submitSorting" class="sub-btn">
          提交
        </div>
      </div>
    </div>

    <el-dialog
      v-model="packageDetailVisible"
      width="800"
      class="fj-check-dialog"
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">包裹详情</h4>
          <el-icon @click="close" class="el-icon--left"><Close /></el-icon>
        </div>
      </template>
      <div class="detail">
        <el-row>
          <el-col :span="12">
            <span class="label">单号：</span>
            <span class="value">{{ currentPackageData.orderfillNo }}</span>
          </el-col>
          <el-col :span="12">
            <span class="label">收货人姓名：</span>
            <span class="value">{{ currentPackageData.recipientName }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="label">种类：</span>
            <span class="value">{{ currentPackageData.category }}</span>
          </el-col>
          <el-col :span="12">
            <span class="label">数量：</span>
            <span class="value">{{ currentPackageData.qantity }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="drugs">
        <el-table
          :data="currentPackageData.drugs"
          style="width: 100%"
          row-class-name="table-normal-row"
          header-row-class-name="table-header-row"
        >
          <el-table-column prop="drugId" label="产品编码" width="100" />
          <el-table-column label="药品" width="120">
            <template #default="scope">
              <div class="goods-detail-row">
                <el-image :src="scope.row.outerPackagePicUrl" fit="contain" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="通用名（商品名）" width="180">
            <template #default="scope">
              {{
                (scope.row.commonName || "") +
                (scope.row.productName ? `(${scope.row.productName})` : "")
              }}
            </template>
          </el-table-column>
          <el-table-column prop="standard" label="规格" width="180" />
          <el-table-column prop="amount" label="数量" />
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer mt20">
          <div class="wh-btn" @click="hangupPackage">
            <el-image :src="stopPng" />
            <span>挂起（暂缓分拣）</span>
          </div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted, onUnmounted, markRaw } from "vue";
import cameraPng from "@/assets/img/camera.png";
import checkboxCheckedPng from "@/assets/img/checkboxChecked.png";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  getSortingOrderDetailApi,
  getPackageDrugsApi,
  printSortingOrderApi,
  printPackgeApi,
  getDrugsBy69Api,
  submitSortingApi,
  hangupPackageApi,
  postSortingSummaryApi
} from "@/api/sorting";
import { useUserStoreHook } from "@/store/modules/user";
import { debounce } from "@/utils/tools";
import { Select } from "@element-plus/icons-vue";
import { Warning, Close } from "@element-plus/icons-vue";
import PageTitle from "@/components/PageTitle.vue";
import fjScanPng from "@/assets/img/fj-scan.png";
import finishedPng from "@/assets/img/finished.png";
import completePng from "@/assets/img/complete.png";
import stopPng from "@/assets/img/stop.png";
import { myDialog } from "@/components/myDialog";

const router = useRouter();

// const scanHasResult = ref(false);
const userStore = useUserStoreHook();
const warehouseId = userStore.userInfo.warehouseId;
const userId = userStore.userInfo.user;
const route = useRoute();
const sortingNo = route.query.sortingNo as string;
// console.log("sortingNo:", sortingNo);
if (!sortingNo) {
  router.back();
}

const sortationOrderData = ref();
const sortationCompleted = ref(false);

// 本次扫码结果
const scanResult = ref<any>({});
const hasCheckedDrugs = ref([]);
// 是否开始扫码
const hasBeginScan = ref(false);
// 扫码的药品，在包裹单中的总盒数
const scanDrugNeedNum = ref(0);
// 需要高亮的包裹单的索引值
const hightBaoGuoIndex = ref([]);
const disabledBaoGuoIndex = ref([]);
// 所有扫码过的，且在包裹单中存在的药品
const completedScanDrugs = ref([]);

const currentPackageData = ref();
const packageDetailVisible = ref(false);
// 是否已经扫码完成
const whetherComplete = ref(false);

const durg69No = ref("");

const numToTxt = {
  1: "一",
  2: "二",
  3: "三",
  4: "四",
  5: "五",
  6: "六",
  7: "七",
  8: "八",
  9: "九",
  10: "十",
  11: "十一",
  12: "十二",
  13: "十三",
  14: "十四",
  15: "十五",
  16: "十六",
  17: "十七",
  18: "十八",
  19: "十九",
  20: "二十"
};

function goBack() {
  router.back();
}

async function showPackageDetail(item) {
  try {
    currentPackageData.value = await getPackageDrugsApi(item.orderfillId);
    currentPackageData.value.category = currentPackageData.value.drugs.length;
    // 药品数量
    currentPackageData.value.qantity = currentPackageData.value.drugs.reduce(
      (pre, item) => {
        return (pre += item.amount);
      },
      0
    );
    packageDetailVisible.value = true;
  } catch (error) {
    packageDetailVisible.value = false;
  }
}

async function printSinglePackage() {
  await printPackgeApi([currentPackageData.value.orderfillId]);
  ElMessage({
    type: "success",
    message: "打印成功"
  });
}

async function printAllPackage() {
  await printPackgeApi(
    sortationOrderData.value.orderfills.map(item => item.orderfillId)
  );
  ElMessage({
    type: "success",
    message: "打印成功"
  });
}

function hidePackageDetailDialog() {
  packageDetailVisible.value = false;
}

async function getOrderDetail() {
  sortationOrderData.value = await getSortingOrderDetailApi(sortingNo);
  sortationCompleted.value =
    sortationOrderData.value.status === "已分拣" ? true : false;

  // sortationOrderData.value.orderfills = [
  //   ...sortationOrderData.value.orderfills,
  //   ...sortationOrderData.value.orderfills,
  //   ...sortationOrderData.value.orderfills,
  //   ...sortationOrderData.value.orderfills,
  //   ...sortationOrderData.value.orderfills,
  //   ...sortationOrderData.value.orderfills
  // ];
  // console.log("sortationCompleted:", sortationCompleted.value);
  // 已完成的话，去掉扫码枪监听
  if (sortationCompleted.value) {
    hasBeginScan.value = true;
    document.removeEventListener("keydown", keyDownEvent);
  }
}
// 判断是否扫码完成
function whetherScanCompleteFn() {
  whetherComplete.value = sortationOrderData.value.orderfills.every(item => {
    return item.drugs.every(drug => {
      return drug.scan === true;
    });
  });
}
// 根据69码获取药品
// 拣货单数据 sortationOrderData
// 将药品放入包裹中
function pushDrugToOrderFills() {
  hasCheckedDrugs.value.push(Object.assign({}, scanResult.value));
  // 初始化数据
  scanDrugNeedNum.value = 0;
  hightBaoGuoIndex.value = [];
  const orderfills = sortationOrderData.value.orderfills;
  // 获取含有该药品的包裹

  orderfills.forEach((item, index) => {
    const tempDrug = item.drugs.find(tDrug => {
      const isHas = tDrug.drugId === scanResult.value.drugId;
      if (isHas) {
        tDrug.scan = true;
      }
      return isHas;
    });
    if (tempDrug) {
      scanDrugNeedNum.value += tempDrug.amount;
      hightBaoGuoIndex.value.push(index);
      // 判定包裹是不是已经完成，只需要包裹里的药品都扫码过一次即可，不用核对数量
      if (item.hasScanDrugCategoryNum) {
        item.hasScanDrugCategoryNum = item.hasScanDrugCategoryNum + 1;
      } else {
        item.hasScanDrugCategoryNum = 1;
      }
    }
  });
  if (scanDrugNeedNum.value === 0) {
    // ElMessageBox.alert("本次分拣不包含该药品，请核对拣货汇总单", "扫码结果");
    myDialog.warning({
      message: "本次分拣不包含该药品，请核对拣货汇总单"
    });
  } else {
    completedScanDrugs.value.push(Object.assign({}, scanResult.value));
    whetherScanCompleteFn();
  }
}
const getDrugsBy69 = debounce(
  async function getDrugsBy69(drugNo) {
    try {
      hasBeginScan.value = true;
      const tempScanDrug = await getDrugsBy69Api(warehouseId, drugNo);

      // 判定该药品是否属于本次包裹，和是否已经扫码过
      let isInBaoGuo = false;
      // sortationOrderData.value.orderfills.forEach(orderfillObj => {
      //   orderfillObj.drugs.forEach(drug => {
      //     if (drug.drugId === scanResult.value.drugId) {
      //       isInBaoGuo = true
      //     }
      //   })
      // })
      for (let i = 0; i < sortationOrderData.value.orderfills.length; i++) {
        const orderfillObj = sortationOrderData.value.orderfills[i];
        for (let j = 0; j < orderfillObj.drugs.length; j++) {
          const drug = orderfillObj.drugs[j];
          if (drug.drugId === tempScanDrug.drugId) {
            isInBaoGuo = true;
            break;
          }
        }
        if (isInBaoGuo) {
          break;
        }
      }
      if (!isInBaoGuo) {
        // ElMessageBox.alert("本次分拣不含该药品，请核对！", "扫码结果", {
        //   type: "warning",
        //   icon: markRaw(Warning)
        // });
        myDialog.warning({
          message: "本次分拣不含该药品，请核对！"
        });
        return;
      }
      const hasCheck = hasCheckedDrugs.value.some(drug => {
        return drug.drugId === tempScanDrug.drugId;
      });
      if (hasCheck) {
        myDialog.warning({
          message: "重复扫码，请核对！"
        });
        // ElMessageBox.alert("重复扫码，请核对", "扫码结果", {
        //   type: "warning",
        //   icon: markRaw(Warning)
        // });
        return;
      }
      scanResult.value = tempScanDrug;

      // console.log("scanResult.value:", scanResult.value);
      pushDrugToOrderFills();
    } catch (error) {
      // ElMessageBox.alert("您扫描的条码非商品码，请核对重新扫描", "扫码结果", {
      //   type: "warning",
      //   icon: markRaw(Warning)
      // });
      myDialog.warning({
        message: "您扫描的条码非商品码，请核对重新扫描！"
      });
    }
  },
  500,
  true
);

async function printSortingOrder() {
  await printSortingOrderApi(sortationOrderData.value.sortingId);
  ElMessage({
    type: "success",
    message: "打印成功"
  });
}

async function submitSorting() {
  await submitSortingApi(sortationOrderData.value.sortingId, userId);
  ElMessage({
    message: "分拣完成",
    type: "success"
  });
  router.push({ path: "/fenjian/fjList" });
}

async function hangupPackage() {
  try {
    await hangupPackageApi(currentPackageData.value.orderfillId, userId);
    ElMessage({
      message: "挂起成功，请在包裹处理页面查看",
      type: "success"
    });
    const sortationTargetIndex = sortationOrderData.value.orderfills.find(
      item => {
        return item.orderfillId === currentPackageData.value.orderfillId;
      }
    );
    packageDetailVisible.value = false;

    // 装箱单中被挂起的那个包裹
    const sortationTarget =
      sortationOrderData.value.orderfills[sortationTargetIndex];
    // 如果包裹中存在正在被扫的那个药品，则修改药品数量和高亮值
    const targetDrug = sortationTarget.drugs.find(item => {
      return item.drugId === scanResult.value.drugId;
    });
    if (targetDrug) {
      scanDrugNeedNum.value = scanDrugNeedNum.value - targetDrug.amount;
      hightBaoGuoIndex.value = hightBaoGuoIndex.value.splice(
        sortationTargetIndex,
        1
      );
    }
    disabledBaoGuoIndex.value.push(sortationTargetIndex);

    // 删除对应的包裹

    // currentPackageData.value.drugs
    // sortationOrderData.value.orderfills = sortationOrderData.value.orderfills.filters
  } catch (error) {
    console.log("error:", error);
  }
}
function getTotalDrugsAmount(orderfillItem) {
  return orderfillItem.drugs.reduce((pre, curItem) => {
    return pre + curItem.amount;
  }, 0);
}

function getAmount(orderfillItem) {
  if (scanResult.value && orderfillItem) {
    const targetDrug = orderfillItem.drugs.find(drug => {
      return drug.drugId === scanResult.value.drugId;
    });
    if (targetDrug) {
      return targetDrug.amount;
    }
  }
}

// 扫码枪事件
let scanInputNumber = "";
let keyLastTime = 0;
function enterEvent(orderfillNo) {
  // console.log("enterEvent orderfillNo:", orderfillNo);
  durg69No.value = orderfillNo;
  getDrugsBy69(orderfillNo);
}
function keyDownEvent(event) {
  let gap = 0;
  if (keyLastTime) {
    gap = new Date().getTime() - keyLastTime;
    // 大于50毫秒，则判定为人输入
    if (gap > 50) {
      gap = 0;
      scanInputNumber = "";
    }
  }
  keyLastTime = new Date().getTime();
  if (gap < 50) {
    const theEvent = event || window.event;
    const code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code !== 13 && theEvent.key.length === 1) {
      scanInputNumber += theEvent.key;
    }

    if (code === 13) {
      scanInputNumber = scanInputNumber.replace(/\D*/, "");
      enterEvent(scanInputNumber);
      scanInputNumber = "";
      keyLastTime = 0;
    }
  }
}
onMounted(() => {
  getOrderDetail();
  document.addEventListener("keydown", keyDownEvent);
});
onUnmounted(() => {
  document.removeEventListener("keydown", keyDownEvent);
});
</script>
<style lang="scss">
$drugItemWidth: 140px;

.fj-check-dialog {
  .el-dialog__header,
  .el-dialog__body {
    padding: 0;
  }
  .my-header {
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
    border-bottom: 0.5px solid #d8d8d8;
    position: relative;
    height: 70px;
    h4 {
      height: 70px;
      width: 100%;
      text-align: center;
      line-height: 70px;
      font-size: 24px;
      font-weight: bold;
      color: #3d3d3d;
    }
    .el-icon--left {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .detail {
    padding: 10px 30px;
    border-bottom: 0.5px solid #d8d8d8;
    .el-row {
      border-bottom: 1px dashed #d8d8d8;
      height: 50px;
      line-height: 50px;
      &:last-child {
        border-bottom: 0;
      }
      .el-col {
        display: flex;
        align-items: center;
      }
      .label {
        font-family: Source Han Sans CN;
        font-size: 18px;
        font-weight: bold;
        letter-spacing: 0em;
        color: #b5b5c3;
        display: inline-block;
        width: 140px;
      }
      .value {
        font-family: Source Han Sans CN;
        font-size: 18px;
        font-weight: normal;
        letter-spacing: 0em;
        color: #3f4254;
        display: inline-block;
        width: calc(100% - 60px);
      }
    }
  }
  .drugs {
    padding: 0px 30px;
    margin-top: 30px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    .wh-btn {
      width: 200px;
      height: 50px;
      opacity: 1;
      border: 1px dashed #ff7f65;
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0em;
      color: #ff7f65;
      display: flex;
      align-items: center;
      justify-content: center;

      .el-image {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
$drugItemWidth: 180px;

@keyframes updown {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    transform: translateY(20px);
    opacity: 1;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}
.updownAnmi {
  animation: updown 1s linear infinite;
}
.main-content {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  .ib-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .scan {
      width: 370px;
      flex-shrink: 0;
      background-color: white;
      position: relative;
      margin-right: 30px;
      border-radius: 10px;
      box-sizing: border-box;
      .tip {
        height: 50px;
        line-height: 50px;
        border-radius: 10px 10px 0px 0px;
        opacity: 1;

        background: #ff7f65;
        color: white;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        &.green {
          background: #50cd89;
        }
      }
      .logo {
        margin: auto;
        width: 270px;
        height: 328px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .scan-line {
          position: absolute;
          top: 74px;
          left: 52px;
          width: 174px;
          height: 0px;
          border-bottom: 6px solid #ff7f65;
          opacity: 0;
        }
      }
      .scan-img {
        width: 270px;
        height: 328px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .info {
        border-top: 1px solid #d8d8d8;
        padding: 10px 20px 0px;
        box-sizing: border-box;
        margin-top: 8px;
        .el-row {
          border-bottom: 1px dashed #d8d8d8;
          height: 50px;
          line-height: 50px;
          &:last-child {
            border-bottom: none;
          }
          .i-label {
            font-family: Source Han Sans CN;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0em;
            color: #b5b5c3;
          }
          .i-value {
            font-family: Source Han Sans CN;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0em;
            color: #3f4254;
            overflow: hidden;
            word-break: break-word;
            display: inline-block;
            height: 50px;
          }
        }
      }
    }
    .package {
      width: calc(100% - 400px);
      > .el-row {
        min-height: 396px;
      }
      .p-card {
        .box-card {
          min-width: 233px;
          width: 100%;
          height: 177px;
          flex-shrink: 0;
          margin-bottom: 20px;
          position: relative;
          padding: 10px;
          box-sizing: border-box;
          background-color: white;
          border-radius: 10px;
          overflow: hidden;
          &.complete {
            background: #eee;
          }
          &.inActive {
            background: #909399 !important;
            pointer-events: none !important;
          }
          &.active {
            color: white;
            &::before {
              content: " ";
              background: #50cd89;
              display: inline-block;
              width: 100%;
              height: 37px;
              position: absolute;
              top: 0;
              left: 0;
            }
            .num {
              color: #50cd89;
            }
            .index,
            .num2 {
              color: white;
            }
          }

          .orderNo {
            position: absolute;
            bottom: 5px;
            left: 10px;
            color: #b5b5c3;
            font-size: 18px;
            user-select: none;
          }
          .num {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: Source Han Sans CN;
            font-size: 30px;
            font-weight: bold;
            color: #50cd89;
          }
          .num2 {
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 30px;
            color: #b5b5c3;
            font-size: 18px;
          }
          .complete {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .el-image {
              width: 32px;
              height: 32px;
            }
          }
          .index {
            position: absolute;
            top: 5px;
            left: 10px;
            color: #b5b5c3;
            font-size: 18px;
          }
        }
      }

      .detail {
        background-color: white;
        border-radius: 10px;
        padding: 0px 24px;
        .el-row {
          height: 50px;
          line-height: 50px;
          border-bottom: 1px dashed #d8d8d8;
          &:last-child {
            border-bottom: none;
          }
          .t-label {
            font-family: Source Han Sans CN;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0em;
            color: #b5b5c3;
            margin-right: 30px;
            display: inline-block;
            width: 80px;
          }
          .t-value {
            font-family: Source Han Sans CN;
            font-size: 18px;
            font-weight: normal;
            letter-spacing: 0em;

            color: #3f4254;
          }
        }
      }
    }
  }
  .btn-group {
    margin-top: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    .sub-btn {
      width: 200px;
      height: 50px;
      border-radius: 4px;
      background: #3689f5;
      text-align: center;
      line-height: 50px;
      color: white;
    }
  }
}

.btn-group {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .btn-g-right {
    span {
      margin-right: 40px;
    }
  }
  // .sub-btn {
  //   position: absolute;
  //   top: 0;
  //   left: 50%;
  //   transform: translateX(-50%);
  // }
}
</style>
